<template>
  <div class="qopSon oldwarn" >
	<common id="nulll" ref='common'></common>
  	<div @click="getData()" class="word_box word12">
		  	<div  class="warn_YM clear_float" v-for="(item , index) of data" @click="openData(item)" :key="index">
				<div>
					<img :src="item.icon" alt="">
					
				</div>
				<div class="warn_YM_cons">
                    <div>{{item.unitname}}发布{{item.yjch}}</div>
                    <div >{{item.yjptime}}</div>
                    <!-- :style="{'color':item.icon.split('_')[1].replace('.jpg','').replace('.gif','')}" -->
                </div>
			</div>
			<div id="noWarn" v-show="data.length==0">
				<img src="../../../static/images/warnicon/warn.png">
			</div>
	</div>
	<vue-modaltor
		:visible="open"
		@hide="open = false"
		:default-width="'60%'"
		:bg-overlay = "'rgba(0,0,0,0.3)'"
		:bg-panel = "'#fff'"
		:animation-panel="'modal-slide-top'">
		<div class="modal_yj">
			<div>
				<img :src="selData.icon" alt="">
				<span>{{selData.unitname}}发布{{selData.yjch}}</span>
			</div>
			<div>
				{{selData.yjcontent}}
			</div>
		</div>
	</vue-modaltor>	
  </div>
</template>

<script>
import topTitle from './top'
import echarts from 'echarts'
import Vue from 'vue'
import VueModalTor from 'vue-modaltor';
import common from '../common'
Vue.use(VueModalTor);
export default {
    props:["msg"],
	components: {
        topTitle,common
    },
	data() {
		return {
			title:{
				name: "预警",
				time: "2018-10-22 16:13",
			},
			open:false,
			word:"",
            charts:{},
			data:[],
			selData:"",
			colorIMGObj:{"台风蓝色预警":"../../../static/images/warnicon/tf_blue.gif","台风黄色预警":"../../../static/images/warnicon/tf_yellow.gif","台风橙色预警":"../../../static/images/warnicon/tf_orange.gif","台风红色预警":"../../../static/images/warnicon/tf_red.gif",
                "暴雨蓝色预警":"../../../static/images/warnicon/by_blue.gif","暴雨黄色预警":"../../../static/images/warnicon/by_yellow.gif","暴雨橙色预警":"../../../static/images/warnicon/by_orange.gif","暴雨红色预警":"../../../static/images/warnicon/by_red.gif",
                "暴雪蓝色预警":"../../../static/images/warnicon/bx_blue.gif","暴雪黄色预警":"../../../static/images/warnicon/bx_yellow.gif","暴雪橙色预警":"../../../static/images/warnicon/bx_orange.gif","暴雪红色预警":"../../../static/images/warnicon/bx_red.gif",
                "寒潮蓝色预警":"../../../static/images/warnicon/hc_blue.jpg","寒潮黄色预警":"../../../static/images/warnicon/hc_yellow.jpg","寒潮橙色预警":"../../../static/images/warnicon/hc_orange.jpg","寒潮红色预警":"../../../static/images/warnicon/hc_red.jpg",
                "大风黄色预警":"../../../static/images/warnicon/df_yellow.jpg","大风橙色预警":"../../../static/images/warnicon/df_orange.jpg","大风红色预警":"../../../static/images/warnicon/df_red.jpg",
                "大雾黄色预警":"../../../static/images/warnicon/dw_yellow.jpg","大雾橙色预警":"../../../static/images/warnicon/dw_orange.jpg","大雾红色预警":"../../../static/images/warnicon/dw_red.jpg",
                "雷电黄色预警":"../../../static/images/warnicon/ld_yellow.jpg","雷电橙色预警":"../../../static/images/warnicon/ld_orange.jpg","雷电红色预警":"../../../static/images/warnicon/ld_red.jpg",
                "冰雹橙色预警":"../../../static/images/warnicon/bb_orange.jpg","冰雹红色预警":"../../../static/images/warnicon/bb_red.jpg",
                "霜冻蓝色预警":"../../../static/images/warnicon/sd_blue.jpg","霜冻黄色预警":"../../../static/images/warnicon/sd_yellow.jpg","霜冻橙色预警":"../../../static/images/warnicon/sd_orange.jpg",
                "高温橙色预警":"../../../static/images/warnicon/gw_orange.gif","高温红色预警":"../../../static/images/warnicon/gw_red.gif",
                "干旱橙色预警":"../../../static/images/warnicon/gh_orange.jpg","干旱红色预警":"../../../static/images/warnicon/gh_red.jpg",
                "道路结冰黄色预警":"../../../static/images/warnicon/dljb_yellow.jpg","道路结冰橙色预警":"../../../static/images/warnicon/dljb_orange.jpg","道路结冰红色预警":"../../../static/images/warnicon/dljb_red.jpg",
                "霾黄色预警":"../../../static/images/warnicon/li_yellow.jpg","霾橙色预警":"../../../static/images/warnicon/li_orange.jpg",
                "台风报告单":"../../../static/images/warnicon/tfbgd.jpg",
                }
		}
	},
	methods:{
		refreshAll(){

		},
		openData(data){
			this.selData=data;
			this.open=true;
		},
        getData(params) {
            this.$ajax({method: 'get',	url: "http://10.135.30.116:8080/ZJDataCenter/api/SURF_ZJ_MUL_YJInfo/getSurfEle?userid=wlzx&pwd=123&elements=unitname,unitcode,yjstatus,yjvalidtime,yjid,yjpic,yjsmallpic,yjgrade,yjch,yjptime,yjcontent&level=999&dataformat=json",}).then((res)=>{
                var _data=res.data.DS;
				this.data=[];
				// console.log(res)
                // for(var i=0;i<_data.length;i++){
                //     if(_data[i].yjstatus==1){
                //         _data.push(_data[i]);
                //     }
				// };
				var thisT=this.$refs.common.getthisTime();
				this.title.time=this.$refs.common.timechangeShow(thisT);
				var p;
                for(var i=0;i<_data.length;i++){ 
                    for(p in this.colorIMGObj){
                        if(_data[i].yjch.match(p.slice(0,6))){
							var icon=this.colorIMGObj[p];
							_data[i].icon=icon
                        }
                    };
				};
                this.data=_data;
                var obj={
                    name:"预警",
                    num:_data.length+"个",
                    data:_data,
                }
                this.$emit('refreshWarn',obj)
                console.log(_data);
                console.log(_data[0].icon.split('_')[1].replace('.jpg','').replace('.gif'));
            })
            .catch(function(err){
                //console.log(err)
            })
        }
        
		
    },
	mounted(){
        this.$emit('refreshTop',this.title);
        this.getData();
	}
}
</script>

<style lang="less">
	.oldwarn{
		height: 349px;
		#noWarn{
			text-align: center;
			font-size: 19px;
			padding-top:100px;
			img{
				width: 250px;
				vertical-align: middle;
			}
		}
		.modal_yj{
			color: #666;
		}
		img{
			width: 70px;
			vertical-align: middle;
		}
		.warn_YM{
			padding: 10px ;
			cursor: pointer;
			&>div{
                font-size: 13px;
                float: left;
				color: orange;
				span{
					margin-left: 12px;
				}
			}
			.warn_YM_cons{
                width: 70%;
				margin-top: 5px;
                font-size: 16px;
                margin-left: 10px;
                color: #fff;
                &>div{
                    // text-align: center;
                    &:first-child{
                        margin-bottom: 10px;
                        text-align: left;
                        &+div{
                            margin-left: 15px;
                        }
                    }
                }
			}
			&:hover{
				background: rgba(255, 255, 255, 0.3);
			}
			&:last-child{
				margin-bottom: 10px;
			}
		}
		
	}
</style>
